<template>
  <div class='t-page' :style="cursorStyle">
    <div class="left-box">
      <img class="logo" src="../../assets/imgs/preview/logo.png" />
      <div class="left-main-box">
        <div><img @click.stop="goHome" class="item-hover" src="../../assets/imgs/preview/homeButton.png" /></div>
        <div><img @click.stop="doFullScreen" class="item-hover" src="../../assets/imgs/preview/fullScreenButton.png" /></div>
        <div><img @click.stop="goBack" class="item-hover" src="../../assets/imgs/preview/backButton.png" /></div>
      </div>
      <img class="version" src="../../assets/imgs/preview/version.png" />
    </div>
    <div class="right-box">
      <img @click="doClose" class="close-button" src="../../assets/imgs/preview/closeButton.png" />
      <div class='canvas-box'>
        <div id='canvaspd' :style="{width: init.width + 'px', height: init.height + 'px'}">
          <canvas id="canvas" v-if='isShowCanvas' :width="init.width" :height="init.height"></canvas>
        </div>
      </div>
      <template v-for="(ele, idx) in currentHotmap">
        <img v-if="ele.img" :style="ele.styleObj" :class="ele.className" :src="require(`../../assets/imgs/${ele.img}.png`)" :key="idx" @click="ele.onClick(ele)">
        <div v-else :style="ele.styleObj" :class="ele.className" @click="ele.onClick(ele)" :key="idx"></div>
      </template>
      <div class="book-box">
        <!-- <transition-group name="fade"> -->
          <template v-for="(item, index) in pages">
            <div v-if="index === currentPagesNum" :class="['book']" :key="index" ref="bookRef">
              <div class="book-item">
                <img v-if="currentLeftType==='subject'" :src="require(`../../assets/imgs/${item.leftSubject}.png`)" />
                <img v-else :src="require(`../../assets/imgs/${item.leftAnswer}.png`)" />
              </div>
              <div class="book-item">
                <img v-if="currentRightType==='subject'" :src="require(`../../assets/imgs/${item.rightSubject}.png`)" />
                <img v-else :src="require(`../../assets/imgs/${item.rightAnswer}.png`)" />
              </div>
            </div>
          </template>
        <!-- </transition-group> -->

        <!-- <CanPreview ref='canPreview' v-if='isShowPreview' :url='url' @close='previewClose'></CanPreview> -->
      </div>
      <div class="handle-box">
        <div :class="['handle-item', currentButton==='isShowSelect'?'activity':'']" @click.stop="doHandleBtn('isShowSelect')">
          <span class="handle-item-hover">画笔</span>
          <img src="../../assets/imgs/preview/penButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='isRubber'?'activity':'']" @click.stop="doHandleBtn('isRubber')">
          <span class="handle-item-hover">橡皮檫</span>
          <img src="../../assets/imgs/preview/rubberButton.png" />
        </div>
        <div :class="['handle-item']" @click.stop="doHandleBtn('isNarrow')">
          <span class="handle-item-hover">缩小</span>
          <img src="../../assets/imgs/preview/narrowButton.png" />
        </div>
        <div :class="['handle-item']" @click.stop="doHandleBtn('isEnlarge')">
          <span class="handle-item-hover">放大</span>
          <img src="../../assets/imgs/preview/enlargeButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='isDrag'?'activity':'']" @click.stop="doHandleBtn('isDrag')">
          <span class="handle-item-hover">移动</span>
          <img src="../../assets/imgs/preview/dragButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='dragMove'?'activity':'']" @click.stop="doHandleBtn('dragMove')">
          <span class="handle-item-hover">鼠标</span>
          <img src="../../assets/imgs/preview/mouseButton.png" />
        </div>
        <div :class="['handle-item']" @click.stop="doPrevPage">
          <span class="handle-item-hover">上页</span>
          <img src="../../assets/imgs/preview/prevButton.png" />
        </div>
        <div class="handle-item page-content">
          <span>{{pages[currentPagesNum].showPageText}}</span>
          <!-- <span v-if="currentPagesNum==0"></span>
          <span v-else>
            P{{(currentPagesNum+this.pageStart)-1}}/P{{(currentPagesNum+this.pageStart)}}
          </span> -->
        </div>
        <div :class="['handle-item']" @click.stop="doNextPage">
          <span class="handle-item-hover">下页</span>
          <img src="../../assets/imgs/preview/nextButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='isShowChartBg'?'activity':'']" @click.stop="doHandleBtn('isShowChartBg')">
          <span class="handle-item-hover">图形</span>
          <img src="../../assets/imgs/preview/chartButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='isShowDiceBg'?'activity':'']" @click.stop="doHandleBtn('isShowDiceBg')">
          <span class="handle-item-hover">点数</span>
          <img src="../../assets/imgs/preview/diceButton.png" />
        </div>
        <div :class="['handle-item', currentButton==='isShowNumberBg'?'activity':'']" @click.stop="doHandleBtn('isShowNumberBg')">
          <span class="handle-item-hover">数字</span>
          <img src="../../assets/imgs/preview/numberButton.png" />
        </div>
      </div>
      <!-- <div class=""></div> -->
      <div :class="['dialog-item', 'chart', chartBg==1?'chart1':'chart2' ]" v-if="currentButton==='isShowChartBg'">
        <div :class="['chart-item', item===currentBgButton?'chart-item-activity':'']" v-for="item in 14" :key="item" @click="doChartItem(item,chartBg)"></div>
        <div class="next-or-chart" @click="doChangeBg"></div>
        <img class='c-close' src='../../assets/imgs/home/icon_close.png' @click.stop="doHandleBtn('isShowChartBg')" />
      </div>
      <div class="dialog-item dice" v-if="currentButton==='isShowDiceBg'">
        <div :class="['dice-item', item===currentBgButton?'dice-item-activity':'']" v-for="item in 9" :key="item" @click="doDiceItem(item)"></div>
        <img class='c-close' src='../../assets/imgs/home/icon_close.png' @click.stop="doHandleBtn('isShowDiceBg')" />
      </div>
      <div class="dialog-item number" v-if="currentButton==='isShowNumberBg'">
        <div :class="['number-item', item===currentBgButton?'number-item-activity':'']" v-for="item in 10" :key="item" @click="doNumberItem(item)"></div>
        <img class='c-close' src='../../assets/imgs/home/icon_close.png' @click.stop="doHandleBtn('isShowNumberBg')" />
      </div>
    </div>
    <ColorSelect v-if="currentButton==='isShowSelect'" v-model="color" @change="colorChange" @close="doHandleBtn('isShowSelect')"></ColorSelect>
  </div>
</template>

<script>
import { ipcRenderer } from 'electron'
// import { getCase } from './config'
import ColorSelect from './components/ColorSelect'
import cavansJs from '../../mixins/cavans.js'
import handleJs from '../../mixins/handle.js'
// import CanPreview from './components/CanPreview'
export default {
  name: 'previewPage',
  mixins: [cavansJs, handleJs],
  data () {
    return {
      currentLeftType: 'subject', // subject(题目) answer(答案)
      currentRightType: 'subject', // subject(题目) answer(答案)
      pages: [], // 当前课本内容
      color: 'rgba(0,162,238,1)', // 当前颜色
      // pageStart: 0, // 起始页码(用于显示)
      bookId: 0, // 当前是第几本书
      currentPagesNum: 0, // 当前显示第几页
      currentButton: '', // 当前选中的操作按钮
      chartBg: 1,
      audioObj: null,
      currentBgButton: '' // 当前选中的图形样式
    }
  },
  components: {
    ColorSelect,
  },
  computed: {
    lineWidth () {
      return (this.lineSize * 15)/10
    }
  },
  created () {
    // console.log(this.$route.params)
    let { bookId, currentPagesNum } = this.$route.query
    this.currentPagesNum = currentPagesNum * 1
    this.bookId = bookId
    let caseDate = require(`./case${this.bookId}`)
    let { pages } = caseDate.getCase(this)
    this.pages = pages
    // this.allHotmap=pages.map(item=>{
    //   return item.hotmap || []
    // })
    // console.log(allHotmap)
    // this.pageStart = pageStart
    this.currentButton = ''
    this.currentBgButton = ''
  },
  beforeDestroy() {
    if (this.resizeFunc) {
      // ipcRenderer.removeListener('master-resize', this.resizeFunc)
      window.removeEventListener('resize', this.throttle(this.resizeFunc, 400))
    }
  },
  // activated () {
  //   // console.log(this.$route, '=====')
  //   let { init } = this.$route.query
  //   if (init) {
  //     let arr = this.$route.name.split('-')
  //     let caseDate = require(`./case${arr[1]}`)
  //     this.currentLeftType = 'subject'
  //     this.currentRightType = 'subject'
  //     let { pageStart, pages } = caseDate.getCase(this)
  //     this.pages = pages
  //     this.pageStart = pageStart
  //     this.url = ''
  //     this.currentPagesNum = arr[2] * 1
  //   }
  //   this.currentButton = ''
  //   this.currentBgButton = ''
  // },
  // deactivated () {
  //   this.audioObj && this.audioObj.load && this.audioObj.load()
  // },
  mounted () {
    // this.reRenderCanvas()
    this.reRenderCanvas()
  },
  methods: {
    // 换图形背景
    doChangeBg () {
      this.currentBgButton = ''
      this.chartBg = this.chartBg == 1 ? 2 : 1
    },
    // 画图形
    doChartItem (item, chartBg) {
      this.currentBgButton = item
      this.optChart(item, chartBg)
    },
    // 画色子
    doDiceItem (item) {
      this.currentBgButton = item
      this.optHandler('point', item)
    },
    //  画数字
    doNumberItem (item) {
      this.currentBgButton = item
      this.optHandler('num', item)
    },
    // 播放音频
    doPlayAudio (src) {
      if (!this.audioObj) {
        this.audioObj = new Audio()
      }
      this.audioObj.src = require(`../../assets/imgs/${src}.mp3`)
      this.audioObj.load()
      this.audioObj.play()
    },
    // 去放大页面
    gotoPreview (src) {
      this.setStorage()
      this.$router.push({
        path: `/big`,
        query: {
          url: encodeURIComponent(src), // 放大图片url
          bookId: this.bookId,// 当前是第几本书
          currentPagesNum: this.currentPagesNum, // 当前显示第几页
          showPageText: this.pages[this.currentPagesNum].showPageText, // 当前显示页码
          pagesLength: this.pages.length // 书本总长度
        }
      })
    },
    // 画板存在时，判断放大的位置
    // leftOrRight (e) {
    //   if (this.currentButton === 'isEnlarge') {
    //     let { clientX, clientY } = e // 鼠标的位置
    //     // let { clientWidth } = this.$refs.bookRef[0]  // 元素宽高
    //     let { left, top, right, bottom } = this.$refs.bookRef[0].getBoundingClientRect() // 元素在浏览器的位置
    //     if (clientX > left && clientX < right && clientY > top && clientY < bottom) {
    //       // let { currentPagesNum, bookId } = this.$route.params
    //       let src = `case${this.bookId}/P${this.currentPagesNum}.png`
    //       // let x = clientX - left
    //       // if (x < (clientWidth / 2)) {
    //       //   src = src + '-01.png'
    //       //   console.log('左边')
    //       // } else {
    //       //   src = src + '-02.png'
    //       //   console.log('右边')
    //       // }
    //       // console.log(src)
    //       this.gotoPreview(src)
    //     }
    //   }
    // },
    // 下一页
    doNextPage () {
      this.clearStorage()
      this.currentLeftType = 'subject' // subject(题目) answer(答案)
      this.currentRightType = 'subject' // subject(题目) answer(答案)
      this.doHandleBtn('')
      this.audioObj && this.audioObj.load && this.audioObj.load()
      if (this.currentPagesNum < (this.pages.length - 1)) {
        this.currentPagesNum = this.currentPagesNum + 1
      } else {
        this.currentPagesNum = 0
      }
      // this.currentPagesNum = 
      // let arr = this.$route.name.split('-')
      // if (this.currentPagesNum < this.pages.length - 1) {
      //   this.$router.push({ path: `preview-${arr[1]}-${(arr[2] * 1) + 1}`, query: { init: true } })
      // } else {
      //   this.$router.push({ path: `preview-${arr[1]}-0`, query: { init: true } })
      // }
    },
    // 上一页
    doPrevPage () {
      this.clearStorage()
      this.currentLeftType = 'subject' // subject(题目) answer(答案)
      this.currentRightType = 'subject' // subject(题目) answer(答案)
      this.doHandleBtn('')
      this.audioObj && this.audioObj.load && this.audioObj.load()
      if ((this.currentPagesNum - 1) >= 0) {
        this.currentPagesNum = this.currentPagesNum - 1
      } else {
        this.currentPagesNum = this.pages.length - 1
      }
    },
    doFullScreen () {
      this.doHandleBtn('')
      this.stopAll()
      ipcRenderer.send('master-maximize')
    },
    doClose () {
      this.doHandleBtn('')
      ipcRenderer.send('master-before-close')
    },
    goHome () {
      this.doHandleBtn('')
      this.$router.push({ name: 'indexPage' })
    },
    goBack () {
      this.doHandleBtn('')
      this.$router.push({ name: 'indexPage' })
    },
    colorChange () {
      this.optHandler('line')
      // console.log('this.color-------------> ', this.color)
    }
  }
};
</script>

<style lang="scss">
.t-page {
  background-image: url("../../assets/imgs/preview/bg.png");
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  .left-box {
    background: #b5ddff;
    height: 100%;
    width: 11.5%;
    font-size: 0;
    padding-top: 2.3%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .logo {
      width: 110%;
      height: auto;
    }
    .left-main-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: start;
      flex-wrap: wrap;
      width: 100%;
      // padding: 0 25%;
      box-sizing: border-box;
      div {
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      img {
        display: block;
        width: 50%;
        height: auto;
      }
      .item-hover:hover {
        width: 55%;
      }
    }
    .version {
      width: 70%;
      height: auto;
      margin: 0 auto;
      padding-bottom: 10%;
    }
  }
  .right-box {
    flex: 1;
    position: relative;
    .close-button {
      position: absolute;
      top: 4%;
      right: 3%;
      width: 6%;
      height: auto;
      display: block;
      z-index: 80;
    }
    .close-button:hover {
      width: 6.5%;
    }
    .canvas-box {
      position: absolute;
      width: 78%;
      height: 86%;
      top: 2%;
      left: 10%;
      z-index: 1;
    }

    .answer {
      position: absolute;
      width: 3%;
      top: 4%;
      z-index: 2;
    }
    .answer:hover {
      width: 3.2%;
    }
    .sound {
      width: 2%;
      position: absolute;
      z-index: 2;
    }
    .sound:hover {
      width: 2.2%;
    }
    .catalogue {
      position: absolute;
      width: 14.2%;
      height: 2%;
      z-index: 2;
      // background: red;
      // opacity: 0.5;
    }
    .catalogue:hover {
      border: 2px solid #f5c45b;
      // background: #f5c45b;
      opacity: 0.5;
    }
    .book-box {
      width: 78%;
      height: 86%;
      position: absolute;
      top: 2%;
      left: 10%;
      .book {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        .book-item {
          width: 50%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
            display: block;
            font-size: 0;
          }
        }
      }
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.5s;
      }
      .fade-enter,
      .fade-leave-to {
        opacity: 0;
      }
    }
    .handle-box {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 2%;
      width: 85%;
      height: 5.6%;
      background: #fff;
      border-radius: 20px;
      border: 2px solid #bcb193;
      padding: 0 3%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 16;
      .handle-item {
        width: 5.6%;
        transform: translateY(-25%);
        position: relative;
        img {
          width: 100%;
          height: auto;
          display: block;
        }
        .handle-item-hover {
          display: none;
          width: 100%;
          text-align: center;
          font-size: 1vw;
          position: absolute;
          top: -40%;
          color: #666;
          background: #fff;
          border-radius: 20%;
          opacity: 0.7;
        }
      }
      .handle-item:hover .handle-item-hover {
        display: block;
      }
      .activity {
        width: 7%;
      }
      .page-content {
        width: 15%;
        height: 90%;
        border: 2px solid #00257a;
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          font-size: 2.5vw;
          color: #00257a;
          font-weight: 600;
        }
      }
    }
    .dialog-item {
      width: 24.5%;
      height: 33%;
      position: absolute;
      top: 55%;
      z-index: 16;
      .c-close {
        position: absolute;
        top: -5%;
        right: -5%;
        width: 10%;
        height: 12%;
      }
    }
    .chart1 {
      background-image: url("../../assets/imgs/common/chartBg1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .chart2 {
      background-image: url("../../assets/imgs/common/chartBg2.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .chart {
      left: 57%;
      box-sizing: border-box;
      padding: 1.3% 1.25%;
      padding-right: 0.5%;
      display: flex;
      flex-wrap: wrap;
      .chart-item {
        margin-right: 2.001%;
        margin-bottom: 6.8%;
        width: 23%;
        height: 17%;
        // background: red;
        // opacity: 0.5;
      }
      .next-or-chart {
        position: absolute;
        bottom: 12%;
        right: 18%;
        width: 15%;
        height: 15%;
        // background: red;
        // opacity: 0.5;
      }
      .chart-item-activity {
        border-radius: 1vw;
        background: red;
        opacity: 0.4;
      }
    }
    .dice {
      left: 63.5%;
      background-image: url("../../assets/imgs/common/diceBg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      box-sizing: border-box;
      padding: 3% 2.2%;
      padding-right: 1.8%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .dice-item {
        margin-right: 0.5%;
        margin-bottom: 7.5%;
        width: 31%;
        height: 23.5%;
      }
      .dice-item-activity {
        border-radius: 1vw;
        background: red;
        opacity: 0.4;
      }
    }
    .number {
      left: 70.5%;
      background-image: url("../../assets/imgs/common/numberBg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 0.8% 1.8%;
      padding-right: 1.5%;
      padding-bottom: 2.6%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .number-item {
        margin-bottom: 6.7%;
        width: 28%;
        height: 20%;
        // background: red;
        // opacity: 0.5;
      }
      .number-item-activity {
        border-radius: 1vw;
        background: red;
        opacity: 0.4;
      }
    }
  }
}
</style>
